<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向滑屏</title>
    <style>
        *{
            margin:0;padding:0;
        }

        html,body,#app{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #content{
            height: 2000px;
            background: linear-gradient(to bottom, #fea, #123);
            position:absolute;
            width: 100%;
            left: 0;
            top: 0;
        }
        .scroll-bar{
            width: 4px;
            height: 100px;
            background: rgba(0,0,0,0.5);
            position:absolute;
            right: 0;
            top: 0;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="content"></div>
        <!-- 滚动条 -->
        <div class="scroll-bar"></div>
    </div>

    <script>
        let content = document.querySelector('#content');
        let scrollBar = document.querySelector('.scroll-bar');

        //设置 滚动条的高度  init 初始化
        function init(){
            //计算比例
            let ch = document.documentElement.clientHeight;
            //内容区域高度
            let sh = content.offsetHeight;
            //计算最终的 Height
            let height = ch * ch / sh;
            //设置
            scrollBar.style.height = height + 'px';
        }

        init();

        content.addEventListener('touchstart', function(e){
            //获取元素起始位置距离顶部的偏移量
            this.t = this.offsetTop;
            //获取手指按下时, 距离顶部的偏移量
            this.y = e.changedTouches[0].pageY;
        });

        content.addEventListener('touchmove', function(e){
            this._y = e.changedTouches[0].pageY;
            // x - 3 = 2 - 1;
            let newTop = this._y - this.y + this.t;
            //设置
            this.style.top = newTop + 'px';
            //控制滚动条的位置
            //获取整个文档的高度
            let sh = content.offsetHeight;
            //获取视口的高度
            let ch = document.documentElement.clientHeight;
            //计算最终的top值
            let sTop = newTop * ch / sh;
            //设置top
            scrollBar.style.top = -sTop + 'px';

        });

        content.addEventListener('touchend', function(e){

        });

    </script>
</body>
</html>